<template>
  <div class='homeCategory' id='abcd'>
    <!-- search页面 -->
        <div class='hc_search'>
            <div class='hc_search_top'>
                <div class='hc_r' @click="show()">
                 <i class='hc_s_home'></i>
                 </div>
                <div class='hc_s_i'>
                    <i class='hc_s_icon'></i> 
                    <input type='text' placeholder="搜索附近的商家、商品" required='required' id='hotsearch' @blur='hotsearch()'>
                 </div>
                 <span class='za'>搜索</span>
            </div>
            <div class="hc_search_bottom">
                <div class='yq'>热门搜索</div>
                <div class='hot_search_items'>
                    <li v-for='list in search ' :key='list.id'>
                        <span class='hot_search_items_cc'>{{list.searchitems}}</span>
                    </li>
                </div>
            </div>
        </div>
    <!-- 列表页面 -->
        <div class='list_body_h'>
         <div class='left'>
           <ul class='menu'>
               <li v-for='menu in menus' :key="menu.id" class='menu_li' @click="loadProducts">
                   <span class='text' @click='subWhite()'>{{menu.text}} </span>
               </li>
           </ul>
         </div>
         <div class='right'>
            <ul class='menu' v-show='show'>
                <div v-for='smenu in products' :key="smenu.id"  class='menu_box'>
                     <p class='text1'>{{smenu.text}}</p>
                     <li v-for='sonmenu in smenu.son' :key="sonmenu.id"  class='menu_box_li' >
                       <img :src='sonmenu.imgsrc' alt=''>
                         <span class='text2' >{{sonmenu.title}} </span>
                     </li>
                </div>
            </ul>
         </div>
        </div>
    <!-- 列表页面结束 -->
        <div id='bottom'>
            <bottom></bottom>
        </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      search: [],
      menus: [],
      products:[]
    };
  },
  created() {
    this.shopSearch();
    this.shopProduct();
    this.loadProducts();
  },
  methods: {
    // 顶部search——items信息调用
    shopSearch() {
      this.jq.get(this.apiurl + "/shop/shopSearch").done(result => {
        this.search = result.data;
      });
    },
     //搜索框隐藏
    show() {
      this.$jq(".hc_r").removeClass("show");
      this.$jq(".za").removeClass("show");
      this.$jq(".hc_search_bottom").removeClass("show");
      this.$jq('.list_body_h').removeClass("show2");
    },
    // 搜索框展现
    hotsearch() {
      this.$jq(".hc_r").addClass("show");
      this.$jq(".za").addClass("show");
      this.$jq(".hc_search_bottom").addClass("show");
      this.$jq('.list_body_h').addClass("show2");
    },
    // 调用列表项数据
    shopProduct() {
      this.$jq.get(this.apiurl + "/shop/shopproduct").done(result => {
        this.menus = result.data1;
      });
    },
    //自己栏目的数据使用
    loadProducts() {
      this.$jq.get(this.apiurl + "/shop/shopproduct").done(result => {
        this.products = result.data2
      });
    },
    // menu背景色变白
    subWhite(){
        this.$jq('.menu li').removeClass('white')
       this.$jq(event.target).parent().addClass('white')
    },
  }
};
</script>
<style>
#abcd{
  background: #fff;  
}
.hc_search {
  width: 100%;
  position: fixed;
}
.hc_search_top {
  width: 100%;
  margin: 0.8rem 0 0.4rem;
  display: flex;
  justify-content: space-between;
  z-index:99999
}
.hc_s_i {
  display: flex;
  justify-content: flex-start;
  width: 80%;
  background: #f4f4f4;
  color: #999999;
  border-radius: 1.875rem;
  padding: 0.4rem 1.6rem;
  margin: auto;
}
.hc_s_i > input {
  font-size: 0.875rem;
}
.hc_s_icon {
  background: url(/static/search_bar_sprites.png) no-repeat;
  width: 1rem;
  height: 1.2rem;
  background-size: 3rem 12rem;
  background-position: -0.3rem -1rem;
  padding-left: 1rem;
}
#abcd input {
  border: none;
  background-color: #f4f4f4;
}
.hc_s_home {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  border-left: 0.125rem solid #848484;
  border-bottom: 0.125rem solid #848484;
  -webkit-transform: rotate(45deg) translate3d(1px, 1px, 0);
  -moz-transform: rotate(45deg) translate3d(1px, 1px, 0);
  -ms-transform: rotate(45deg) translate3d(1px, 1px, 0);
  transform: rotate(45deg) translate3d(1px, 1px, 0);
  margin-left: 0.875rem;
  margin-top: 0.4rem;
}
#abcd .za {
  color: #333333;
  font-size: 0.875rem;
  display: inline-block;
  width: 12%;
  line-height: 1.78rem;
  text-align: center;
}
/* 搜索位置热点样式 */
#abcd .yq {
  padding-left: 0.75rem;
  font-size: 0.975rem;
  color: #333;
  font-weight: bold;
}
.hot_search_items {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin: 1rem auto;
}
.hot_search_items > li {
  padding: 0.3rem 4%;
  margin-left: 4%;
  max-width: 39%;
  margin-bottom: 0.75rem;
  background-color: #f4f4f4;
  border-radius: 1.28rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #333333;
  font-size: 0.8125rem;
  overflow: hidden;
}
.hot_search_items_cc {
  overflow: hidden;
}
.hc_search_bottom {
  font-size: 14px;
  line-height: 17px;
  text-align: left;
  overflow: auto;
  background: #fff;
  z-index:9999;
}
.hc_r,
.za,
.hc_search_bottom {
  display: none;
}

.show {
  display: block;
}
#abcd .show2 {
  display: none;
}
/* 列表页开始 */
.list_body_h {
  position: fixed;
  right: 0;
  left: 0;
  top: 4rem;
  bottom: 0;
  z-index: 1;
  border-top: 0.1rem;
  background: #fff;
  margin-bottom: 2rem;
}
#abcd .left {
  width: 25%;
  background: #f4f4f4;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: 4rem;
}
#abcd .right {
  position: absolute;
  margin-left: 25%;
  top: 0;
  bottom: 0;
  right: 0;
  width: 75%;
  overflow-x: hidden;
  overflow-y: auto;
  background: #f4f4f4;
  z-index: 1;
  padding-bottom: 4rem;
  background: #fff;
}
/* 左边列表项设置开始 */
#abcd .menu_li{
    height: 2.69rem;
    padding-left: 0.875rem;
    line-height: 2.75rem;
    font-size: 0.875rem;
    color: #666666;
    white-space: nowrap;
    border-bottom: 0.1rem solid #e8e8e8;
    border-right: 0.1rem solid #e8e8e8;
    background-color: #f8f8f8;
    text-overflow: ellipsis;
    overflow: hidden;
}
#abcd .white{
    background: #fff;
    border-left: 3px solid #47b34f;
    box-sizing: border-box;
    color:#47b34f
}
/* 右边列表商品开始*/
#abcd .menu_box{
    display: flex;
    justify-content:flex-start;
    flex-wrap: wrap;
    width:100%
}
#abcd .text1{
    width:100%;
    height: 1.19rem;
    font-size: 0.8125rem;
    color: #666666;
    padding-left: 8%;
}
#abcd .menu_box_li{
    width:33%;
    text-align: center;
}
#abcd .menu_box_li>img{
    width:80%;
}
#abcd .text2{
    display: block;
    width: 100%;
    text-align: center;
    font-size: 0.75rem;
    color: #7d7d7d;
    padding:0.5rem 0;
}
/* 列表页结束 */
/* 关于底部导航设置 */
#abcd .a11{
    background-position: center -15.625rem;
    display: inline-block;
    height: 1.6rem;
    background-image: url(/static/nav4.png);
    background-repeat: no-repeat;
    background-size: 1.5rem 37.5rem;
    width: 100%;
}
#abcd .a12{
    background-position: center -3.125rem;
    display: inline-block;
    height: 1.6rem;
    background-image: url(/static/nav4.png);
    background-repeat: no-repeat;
    background-size: 1.5rem 37.5rem;
    width: 100%;
}
#abcd .at1{
  color: #555;
}
#abcd .at2{
    color:#39ac69
}
</style>


